<script setup>
import {ref, onMounted} from 'vue'
import {api} from "@/utils/api";
import {getShopList} from "@/utils";
import {useStore} from "@/store";
import USwiper from "../../uni_modules/uview-plus/components/u-swiper/u-swiper.vue";
import UNoticeBar from "../../uni_modules/uview-plus/components/u-notice-bar/u-notice-bar.vue";

const store = useStore()
const Data = ref([])
const swiperList = ref([])
const total = ref(0)
const steps = ref([
  {
    name: '预约回收',
    icon: '../../static/homeIcon/icon1.png'
  },
  {
    name: '上门取件',
    icon: '../../static/homeIcon/icon2.png'
  },
  {
    name: '回收完成',
    icon: '../../static/homeIcon/icon3.png'
  },
  {
    name: '领取现金',
    icon: '../../static/homeIcon/icon4.png'
  }
])
const iconTitle = ref('')
const announcement = ref('')
const dynamicData = ref([])
const dynamicSwiper = ref([])
const questions = ref([])
const navigateTo = async index => {
  const url = dynamicSwiper.value[index].replace(window.baseURL, '');
  const i = dynamicData.value.findIndex(v => v['noticeContent'].includes(url))
  const curData = Data.value['rows'].filter(v => v['noticeType'] === '6' && v.status === '0')[i]
  await store.setCurData(curData)
  await uni['navigateTo']({
    url: '/pages/dynamic/dynamic'
  })
}
onMounted(async () => {
  Data.value = await api({path: '/system/notice/list', isload: false});
  dynamicData.value = (Data.value['rows'] ?? []).filter(v => v['noticeType'] === '6' && v.status === '0')
  dynamicSwiper.value = dynamicData.value.map(v => v['noticeContent'].match(/(?<=img\s?src="\/dev-api).*?(png|jpg)/g)).reduce((prev, cur) => prev.concat(cur), []).map(v => `${window.baseURL}${v}`)
  announcement.value = (Data.value['rows'] ?? []).filter(v => v['noticeType'] === '3')[0]['noticeContent'].match(/(?<=<p>)[\u4e00-\u9fa5].*?(?=<\/p>)/g)[0]
  iconTitle.value = (Data.value['rows'] ?? []).filter(v => v['noticeType'] === '5' && v.status === '0')[0]
  swiperList.value = (Data.value['rows'] ?? []).filter(v => v['noticeType'] === '0' && v.status === '0').map(v => v['noticeContent'].match(/(?<=\/dev-api).*?(jpg|png)/g)).reduce((prev, cur) => prev.concat(cur), []).map(v => `${window.baseURL}${v}`)
  total.value = Number(`401254${(await getShopList(1, 1)).total}`)
  questions.value = (await api({
    path: '/issue/issue/list',
    isload: false
  }))['rows'].filter(v => v.start).map(v => ({id: v.id, title: v.title, content: v['issuebody']}))
})
</script>
<template>
  <view class="home">
    <u-swiper
        :height="240"
        :list="swiperList"
        acceleration
        circular
        indicator
        indicatorMode="dot"
        indicatorStyle="bottom:55px"
    />
    <view class="container-view content">
      <view class="container">
        <view class="item1 content card">
          <view class="header">
            <view class="title">回收指南</view>
            <view class="total-container">累计回收
              <van-rolling-text
                  :height="17"
                  :start-num="0"
                  :target-num="total"
                  class="my-rolling-text"
              />
              次
            </view>
          </view>
          <view class="step">
            <view v-for="(_,i) in steps" :key="i" class="item">
              <view :style="{ width: i === steps.length-1 ? '100%' : '62%' }" class="icon-container">
                <van-icon :name="_.icon" class="icon" size="45"/>
                <view class="name">{{ _.name }}</view>
              </view>
              <view v-if="i!==steps.length-1" class="next"></view>
            </view>
          </view>
          <view class="booking card">
            <view class="header">
              <view class="title-icon">{{ iconTitle['noticeTitle'] }}</view>
            </view>
            <view class="main">
              <image
                  src="../../static/homeIcon/icon5.png"
                  style="width: 120px; height: 100%"
              >
              </image>
              <van-button class="button" type="success">立即预约</van-button>
            </view>
            <view class="footer">
              <view class="title">旧衣回收换现金！</view>
              <view class="text">上门0运费&nbsp;&nbsp;&nbsp;&nbsp;价格高服务好&nbsp;&nbsp;&nbsp;&nbsp;助力绿色环保
              </view>
            </view>
          </view>
          <u-notice-bar
              :text="announcement"
              class="announcement card"
              color="#63DDB2"
              icon="../../static/homeIcon/icon6.png"
          >
          </u-notice-bar>
          <image src="../../static/homeIcon/icon7.png" style="width: 100%; height: 110px;margin-top: 20px;"></image>
        </view>
        <view class="item2">
          <view class="box card">
            <view class="title">分享好友助力环保</view>
            <view class="search">点击生成分享海报</view>
          </view>
          <view class="box card">
            <view class="title">申请成为回收点</view>
            <view class="search">加入我们</view>
          </view>
        </view>
        <view class="item3 card content">
          <view class="header">
            <view class="title">最新动态</view>
            <view class="navigate link">查看更多</view>
          </view>
          <view class="swiper" style="margin-top: 20px;">
            <u-swiper
                :autoplay="true"
                :list="dynamicSwiper"
                acceleration
                bg-color="#ddd"
                circular
                height="120"
                nextMargin="75"
                previousMargin="75"
                radius="5"
                @click="navigateTo"
            ></u-swiper>
          </view>
        </view>
        <view class="item4 card content">
          <view class="title">常见问题</view>
          <up-collapse
              accordion
              :border="false"
              :value="0"
          >
            <up-collapse-item
                v-for="(question, i) in questions"
                :title="question.title"
                :name="i"
            >
              <text class="u-collapse-content">{{ question.content }}</text>
            </up-collapse-item>
          </up-collapse>
          <!--          <view class="content card">-->
          <!--            <view class="left">Q:</view>-->
          <!--            <view class="Right">-->
          <!--              <view class="header">那些衣物可以回收?</view>-->
          <!--              <view class="Text">我们对旧衣新旧程度、大小、薄厚没有过多的要求(衣 物尽量整洁干净就好啦~)春夏衣、秋冬衣、鞋子、包 包、童装、帽子、手套、袜子、背包、床单、被罩、 毛绒玩具均可回收。</view>-->
          <!--            </view>-->
          <!--          </view>-->
          <!--          <view class="content card">-->
          <!--            <view class="left">Q:</view>-->
          <!--            <view class="Right">-->
          <!--              <view class="header">回收的衣服怎么处理?</view>-->
          <!--              <view class="Text">在分拣工厂里，根据衣服的新旧程度，决定是否环保 再生，还有部分会出口到三方国家</view>-->
          <!--            </view>-->
          <!--          </view>-->
          <!--          <view class="content card">-->
          <!--            <view class="left">Q:</view>-->
          <!--            <view class="Right">-->
          <!--              <view class="header">回收需要付运费吗?</view>-->
          <!--              <view class="Text">回收旧衣不需要支付运费: 运费用由销销一下承担。若 遇到快递小哥收运费，告知平台走的是“月结”账户即可</view>-->
          <!--            </view>-->
          <!--          </view>-->
          <view class="text link">全部问题</view>
        </view>
        <view class="item5 card content">
          <view class="title">旧衣去向</view>
          <view class="_container">
            <view class="box card content">
              <view class="title">环保再生</view>
              <view class="text">加工为循环材料</view>
            </view>
            <view class="box card content">
              <view class="title">环保保温原料</view>
              <view class="text">转化为清洁能源</view>
            </view>
            <view class="box card content">
              <view class="title">工业品原料</view>
              <view class="text">加工为工业原料</view>
            </view>
            <view class="box card content">
              <view class="title">旧衣出口</view>
              <view class="text">出口到贫穷国家</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.home {
  width: 100%;

  .container-view {
    width: 100%;
    height: 100%;
    background: rgb(235, 235, 235);

    .container {
      width: 100%;
      transform: translateY(-55px);

      .item1 {
        width: 100%;
        overflow: hidden;
        padding: 20px;
        background: rgb(240, 240, 240) !important;

        .header {
          display: flex;
          justify-content: space-between;

          .title {
            font-size: 20px;
            color: #4B4B4E;
          }

          .total-container {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #A5A5A6;

            .total {
              width: 20px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              background: #D7F5E5;
              color: #2AC977;
              margin-left: 3px;
            }

            .my-rolling-text {
              --van-rolling-text-background: #2AC977;
              --van-rolling-text-color: white;
              --van-rolling-text-font-size: 15px;
              --van-rolling-text-gap: 5px;
              --van-rolling-text-item-border-radius: 2px;
              --van-rolling-text-item-width: 17px;
            }
          }
        }

        .step {
          width: 100%;
          height: 65px;
          margin-top: 20px;
          display: flex;

          .item {
            width: calc(100% / 4);
            height: 100%;
            display: flex;
            align-items: center;

            .icon-container {
              width: 62%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;

              .name {
                font-size: 13px;
                color: #737375;
              }
            }

            .next {
              width: 10px;
              height: 10px;
              transform: rotate(45deg);
              margin-left: 10px;
              border-top: 1px solid #22C872;
              border-right: 1px solid #22C872;
            }
          }
        }

        .booking {
          width: 100%;
          height: 100px;
          margin-top: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .header {
            width: 100%;
            height: 20px;

            .title-icon {
              width: 60px;
              line-height: 20px;
              border-bottom-right-radius: 10px;
              background: #00C653;
              font-size: 10px;
              color: white;
              text-align: center;
            }
          }

          .main {
            width: 100%;
            height: 100%;
            padding: 5px;
            display: flex;
            justify-content: space-around;

            .button {
              width: 110px;
              border-radius: 25px;
              font-size: 17px;
              position: relative;
            }

            .button::after {
              content: '下单领现金';
              display: block;
              width: 60px;
              height: 20px;
              line-height: 20px;
              position: absolute;
              font-size: 9px;
              background: #F5B11F;
              color: #8D5400;
              top: -20px;
              right: -20px;
              border-top-left-radius: 10px;
              border-top-right-radius: 10px;
              border-bottom-right-radius: 10px;
            }
          }

          .footer {
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 20px;
            background: #C9F5E1;
            display: flex;
            padding: 5px;
            justify-content: space-between;

            .title {
              color: #00C653;
              font-style: oblique;
              font-size: 14px;
            }

            .text {
              font-size: 11px;
            }
          }
        }

        .announcement {
          border-radius: 0;
          margin-top: 20px;
        }
      }

      .item2 {
        width: 100%;
        height: 120rpx;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;

        .box {
          width: calc(100% / 2 - 5px);
          height: 100%;
          padding: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .title {
            width: 100%;
            font-size: 11px;
            font-weight: bold;
          }

          .search {
            width: 65%;
            height: 20px;
            line-height: 20px;
            font-size: 11px;
            color: white;
            background: #0CC263;
            border-radius: 15px;
            text-align: center;
          }
        }
      }

      .item3 {
        width: 100%;
        margin-top: 20px;

        .header {
          width: 100%;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            font-size: 15px;
            font-weight: bold;
          }

          .navigate {
            font-size: 12px;
            color: #69696B;
          }
        }
      }

      .item4 {
        width: 100%;
        margin-top: 20px;

        .title {
          font-size: 15px;
          font-weight: bold;
        }

        .content {
          width: 100%;
          display: flex;
          font-size: 15px;
          font-weight: bold;
          background: #F7FDFA;
          margin-top: 20px;

          .left {
            height: 100%;
          }

          .Right {
            width: 100%;
            height: 100%;
            font-weight: normal;
            font-size: 13px;

            .Text {
              margin-top: 10px;
              font-size: 12px;
            }
          }
        }

        .text {
          width: 100%;
          text-align: center;
          font-size: 14px;
          margin-top: 20px;
        }
      }

      .item5 {
        width: 100%;
        height: 250px;
        margin-top: 20px;

        .title {
          font-size: 15px;
          font-weight: bold;
        }

        ._container {
          width: 100%;
          margin-top: 20px;
          height: calc(100% - 40px);
          display: grid;
          grid-template-columns: repeat(2, auto);
          grid-template-rows: repeat(2, auto);
          grid-gap: 10px;

          .box {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            text-align: center;

            .title {
              font-size: 16px;
            }

            .text {
              font-size: 12px;
              font-weight: 100;
            }
          }
        }
      }

      .content {
        background: rgb(240, 240, 240);
      }
    }
  }
}
</style>